<!-- template vue的末模板标签 无意义标签
vue组件的外套  template内部只能有一个标签包裹
-->
<template>
  <div>
    <button @click="back">回退</button>
    <h1 class="box">我是老六</h1>
    <h1 class="seven">老七</h1>
    <h1 class="eight">老八</h1>
    <div id="nav">
      <div class="navlist">
        <h1>今天星期三,马上放假了</h1>
      </div>
    </div>
    <h1>{{msg}}</h1>
    <button @click="force">更新</button>
  </div>
</template>
<script>
// export default  默认导出当前组件
// vue的组件 都是给其他组件当子组件，配置成路由
export default {
  data(){
    return {
      msg:"你好"
    }
  },
  created() {
    console.log("创建后")
  },
  mounted() {
    console.log("挂载后")
  },
  methods: {
    force(){
      this.msg="哈哈哈"
      setTimeout(() => {
          this.$forceUpdate();
      }, 0);
    },
    back(){
      // 前进后退的方法
      // -1 后退 1步  1前进1步
      //  this.$router.go(num)
      // num 是前进和后退的步数
      this.$router.go(-1)
    }
  },
  computed:{},
  watch:{},
  filters:{}
}
</script>
<!-- lang="less或sass或stylus"  -->
<!-- vue的组件样式 styke加scoped 让样式只在当前组件生效-->
<style lang="less" scoped>
/** 
  // less是css的高级版本 也叫css预处理器
  // 只要的语法有创建变量 ，嵌套写法

  // sass和less的区别
    //  sass创建变量用$ less用@创建
    //  sass也用嵌套写法
    // sass 语法更高级 可以用@if @for @while语句等
*/
  @baseColor:#f34500;
  @baseHeight:400px;
.beBorder{ //3.less的 混入
  border-left: 2px solid red;
  border-right: 2px solid blue;
  border-bottom: 2px double green;
  border-top: 2px solid skyblue;
}
 .mybox(@width,@height,@bg){ //带参数的混入
      width:@width;
      height:@height;
      background: @bg;
 }
.box{
  background: @baseColor;
  height:  @baseHeight;
  .beBorder() //调用混入
}
.seven{
  background:@baseColor;
   height:  @baseHeight;
  .beBorder()//调用混入
}
.eight{
  color:red;
  .mybox(500px,500px, blue) //带参数的混入的调用
}
#nav{ //less的嵌套写法
  width:500px;
  height:500px;
  background:blue;
  .navlist{
     width:300px;
    height:300px;
    background:skyblue;
    h1{
      color:red;
      font-size:30px;
      &:hover{ //伪类的样式 &: 当前元素
        color:blue;
      }
    }
    
  }
}



</style>